<script setup>
import RePassword from './components/RePassword.vue'
import EditInfo from './components/EditInfo.vue'
import { useUserStore } from '@/stores/modules/user.js';
import { computed, ref } from 'vue';
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo)
const rePasswordRef = ref()
const editInfoRef = ref()

const editInfo = () => {
  editInfoRef.value.open()
}
const editPass = () => {
  rePasswordRef.value.open()
}
</script>

<template>
  <div>
    <RePassword ref="rePasswordRef" />
    <EditInfo ref="editInfoRef" />
    <div class="head">
      <AButton type="primary" @click="editInfo">修改个人信息</AButton>
      <AButton type="primary" @click="editPass">修改密码</AButton>
    </div>
    <div>
      <a-descriptions bordered style="width: 900px;">
        <a-descriptions-item label="登录账号">{{ userInfo.userName }}</a-descriptions-item>
        <a-descriptions-item label="用户姓名">{{ userInfo.name }}</a-descriptions-item>
        <a-descriptions-item label="手机号">{{ userInfo.phone }}</a-descriptions-item>
        <a-descriptions-item label="电子邮箱">{{ userInfo.email }}</a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<style scoped>
.head {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
</style>